<template>
  <div>
    <table width="800" style="text-align: center; margin: 0 auto;border =1">
      <caption>
        欢迎光临
      </caption>
      <tr>
        <th>苹果{{ price }}￥/斤,折扣 &gt; {{ dis * 10 }}折 &gt;</th>
      </tr>
      <tr>
        <td>
          请输入您要购买的斤数
          <input type="number" v-model="count" placeholder="斤数" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="cel">结账</button>
        </td>
      </tr>
      <tr>
        <td>
          账单:
          <span>总价: {{ allPrice }}￥元</span>
          <span>折扣:{{ disPrice }} ￥元</span>
          <span>节省:{{ savePrice }} ￥元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10, //苹果价格
      dis: 0.8, //折扣
      count: 0, //购买斤数
      allPrice: 0, //总价
      disPrice: 0, //折扣价
      savePrice: 0, //省了多少钱
    };
  },
  methods: {
    cel() {
      this.allPrice = this.price * this.count;
      this.disPrice = this.allPrice * this.dis;
      this.savePrice = this.allPrice - this.disPrice;
    },
  },
};
</script>

<style>
</style>